<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用js完成隔行换色</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            list-style: none;
            margin: 0 auto;
        }

        ul li {
            width: 100%;
            height: 30px;
            margin-top: 5px;
        }

        /*li:nth-of-type(odd) {*/
        /*    background-color: #000;*/
        /*}*/

        /*li:nth-of-type(even) {*/
        /*    background-color: #aaa;*/
        /*}*/
    </style>
</head>
<body>
<!--使用javascript实现隔行更换背景颜色，奇数行为#aaa;偶数行为#000；-->
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    // 一个变量定义到父元素，然后 ele.children 就是所有元素节点  childNodes 会返回所有节点 包括但不限于 文本节点 元素节点 注释节点
    let lis = document.querySelectorAll('ul li');

    for (let i = 0; i < lis.length; i++) {
        let flag = i % 2 === 0;
        if (flag) {
            lis[i].style.backgroundColor = '#000';
        } else {
            lis[i].style.backgroundColor = '#aaa';
        }
    }
</script>
</body>
</html>